<template>
    <div class="appmain">
      <div class="main-child">
          <div class="txun">总运维成本</div>
          <div class="iconset">
            <span :class="['property', 'iconcommon',{'propertyBack':this.energycla ==1}]" @click="pCkicl(1)">
              <span :class="['iconfont', 'icon-zichan',{'activezichan':this.energycla ==1}]"></span>
              <span>&nbsp;资产折旧</span>
            </span>
            <span  :class="['tour', 'iconcommon',{'tourtyBack':this.energycla ==2}]" @click="ptour(2)">
              <span :class="['iconfont', 'icon-xunjian',{'patrol':this.energycla ==2}]"></span>
              <span>&nbsp;巡检成本</span>
            </span>
            <span  :class="['upkeep', 'iconcommon',{'upkeepBack':this.energycla ==3}]" @click="pupkeep(3)">
              <span :class="['iconfont', 'icon-14024',{'maintain':this.energycla ==3}]">
              </span><span>&nbsp;保养成本</span>
            </span>
            <span :class="['cost', 'iconcommon',{'costBack':this.energycla ==4}]" @click="pcost(4)">
              <span :class="['iconfont', 'icon-weixiu-copy',{'service':this.energycla ==4}]"></span>
              <span>&nbsp;维修成本</span>
            </span>
          </div>
          <div class="commonstr str1 addtop">
              <div class="next-title"><span>·&nbsp;运维成本</span><span class="title-number">728&nbsp;万元</span></div>
              <div class="detail">
                  <div ref="main" style="width:100%;height:100%;"></div>
              </div>
          </div>
          <div class="txun addtop">今日客户服务指标</div>
          <div class="commonstr str2 addtop">
              <div ref="main1" style="width:90%;height:90%;margin-left:5%"></div>
          </div>
      </div>
    </div>
</template>
<script>
var echarts = require("echarts");
import { debounce } from "../../../utils";
export default {
  name: "energy",
  data() {
    return {
      chart: null,
      myChart: null,
      startCharts: null,
      energycla:0,
    };
  },
  created() {
    console.log(this.$route);
  },
  mounted() {
    this.initChart();
    this.initChartone();
    // 宽度变化，echarts自适应--暂无效果：echarts宽度固定
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.myChart.resize();
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeDestroy() {
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
    clearInterval(this.startCharts);
  },
  methods: {
    pCkicl(num) {
      WebMouseClickEvent("eventClick_003");
      this.energycla = num;
    },
    ptour(num) {
      WebMouseClickEvent("eventClick_003");
      this.energycla = num;
    },
    pupkeep(num) {
      WebMouseClickEvent("eventClick_003");
      this.energycla = num;
    },
    pcost(num) {
      WebMouseClickEvent("eventClick_003");
      this.energycla = num;
    },
    // eachart
    initChart() {
      let isSet = true;
      let _this = this;
      this.chart = echarts.init(this.$refs.main);
      this.chart.on("mouseover", function(param) {
        clearInterval(_this.startCharts);
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        isSet = false;
      });
      this.chart.on("mouseout", function(param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000);
          isSet = true;
        }
      });
      var option = {
        color: ["#8370fe", "#ffa729", "#00a0ea", "#43c561"],
        tooltip: {
          formatter: "{a}<br>{b}: {c} ({d}%)",
          fontSize: "13"
        },
        legend: {
          data: ["资产折旧", "巡检成本", "", "保养成本", "维修成本"],
          icon: "rect",
          selectedMode:false,
          right: "30px",
          top: "center",
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "运维成本",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "资产折旧" },
              { value: 310, name: "巡检成本" },
              { value: 234, name: "保养成本" },
              { value: 135, name: "维修成本" }
            ]
          }
        ]
      };
      //设置series
      this.chart.setOption(option);
      app.currentIndex = -1;

      var chartHover = function() {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        // 高亮当前图形
        _this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
      };
      // console.log(isSet)
      this.startCharts = setInterval(chartHover, 2000);
    },
    initChartone() {
      this.myChart = echarts.init(this.$refs.main1);
      let data2017 = [890, 900, 920, 950, 990, 1000];
      let data2018 = [900, 910, 950, 990, 1000, 1010];
      this.myChart.setOption({
        color: ["#2dd2ff", "#ff7670", "#f9f41f", "#00ff01"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          },
          formatter: function(params) {
            let text = `${params[0].name}<br>`;
            params.forEach((item, index) => {
              if (item.seriesType === "bar") {
                text += `${item.seriesName}: ${item.value}万元<br>`;
              } else if (item.seriesType === "line") {
                text += `${item.seriesName}: ${item.value}%<br>`;
              }
            });
            return text;
          }
        },
        legend: {
          data: ["2017年", "2018年", "同比增长率", "环比增长率"],
          x: "center", // 'center' | 'left' | {number},
          y: "bottom",
          selectedMode:false,
          textStyle: {
            //图例文字的样式
            color: "#ffffff",
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
            axisPointer: {
              type: "shadow"
            },
            axisLabel: {
              textStyle: {
                color: "#ddd" //坐标值得具体的颜色
              }
            }
          }
        ],
        yAxis: [
          {
            name: "万元",
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
          },
          {
            name: "%",
            nameTextStyle: {
              color: "#fff"
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: "2017年",
            type: "bar",
            data: data2017,
            barWidth: 10, //柱图宽度
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 10, 10]
              }
            }
          },
          {
            name: "2018年",
            type: "bar",
            data: data2018,
            barWidth: 8, //柱图宽度
            itemStyle: {
              normal: {
                barBorderRadius: [10, 10, 10, 10]
              }
            }
          },
          {
            name: "同比增长率",
            type: "line",
            yAxisIndex: 1,
            data: [1, 1.1, 3.2, 4.2, 1, 1]
          },
          {
            name: "环比增长率",
            type: "line",
            yAxisIndex: 1,
            data: [1, 4.2, 4, 1, 1]
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #3b9651;
$fontcolor1: #00a0ea;
$fontcolor2: #ffa628;
$fontcolor3: #6859be;
$fontcolor4: #2dd2ff;
$fontcolor5: #ff7670;
$fontcolor6: #f9f41f;
$fontcolor7: #00ff01;
$fontcolor8: #016bfb;
$mrtop: 8px;
.appmain {
  height: 100%;
  margin-top: 50px;
  width: 27%;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 0px;
  .main-child {
    height: 66%;
    width: 100%;
    position: absolute;
    padding: 0px 40px 0px 0px;
    top: 17%;
    .addtop {
      margin-top: $mrtop;
    }
    // 公用样式
    .txun {
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left: 25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size: 100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    .commonstr {
      width: 94%;
      margin-left: 3%;
      font-size: 0.15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .next-title {
      width: 100%;
      border-bottom: 2px solid $borderbottom;
      padding: 8px;
      .title-number {
        float: right;
      }
    }
    .iconset {
      height: 35px;
      width: 94%;
      margin-left: 3%;
      margin-top: 8px;
      .iconcommon {
        float: left;
        width: 24.8%;
        height: 100%;
        text-align: center;
        line-height: 35px;
        color: white;
        background: rgba($color: black, $alpha: 0.5);
        cursor: pointer;
      }
      .iconfont {
        color: #016bfb;
        font-size: 0.2rem;
        position: relative;
        top: 2px;
      }
      // 1
      .propertyBack {
        //点击事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
      }
      .activezichan {
        //点击事件
        color: #0790d4;
        font-weight: 700;
      }
      .property {
        margin-right: 1px;
      }
      .property:hover {
        //鼠标悬浮事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
        .icon-zichan {
          color: #0790d4;
          font-weight: 700;
        }
      }
      // 2
      .tourtyBack {
        //点击事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
      }
      .patrol {
        //点击事件
        color: #6600cc;
        font-weight: 800;
      }
      .tour {
        margin-right: 1px;
      }
      .tour:hover {
        //鼠标悬浮事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
        .icon-xunjian {
          color: #6600cc;
          font-weight: 800;
        }
      }
      // 3
      .upkeepBack {
        //点击事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
      }
      .maintain {
        //点击事件
        color: #fea934;
        font-weight: 700;
      }
      .upkeep {
        margin-right: 1px;
      }
      .upkeep:hover {
        //鼠标悬浮事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
        .icon-14024 {
          color: #fea934;
          font-weight: 700;
        }
      }
      // 4
      .costBack {
        //点击事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
      }
      .service {
        //点击事件
        color: #00ff01;
        font-weight: 700;
      }
      .cost:hover {
        //鼠标悬浮事件
        background: rgba($color: #2b3c5a, $alpha: 0.8);
        .icon-weixiu-copy {
          color: #00ff01;
          font-weight: 700;
        }
      }
    }
    // 运维成本
    .str1 {
      height: 35%;
      .detail {
        margin: 0;
        font-size: 0;
        height: 82%;
        width: 100%;
        .leftimg {
          width: 50%;
          height: 100%;
          float: left;
        }
        .righticon {
          width: 50%;
          height: 100%;
          float: left;
          .commonicon {
            display: inline-block;
            width: 10px;
            height: 10px;
          }
          .icondiv-one {
            width: 100%;
            margin-top: 23%;
            text-align: center;
            .green {
              background-color: $fontcolor1;
              margin-right: 6px;
            }
            .yellow {
              background-color: $fontcolor2;
              margin-right: 6px;
            }
          }
          .icondiv-two {
            width: 100%;
            // height: 50%;
            margin-top: 5%;
            text-align: center;
            .blue {
              background-color: $fontcolor3;
              margin-right: 6px;
            }
            .purple {
              background-color: $fontcolor4;
              margin-right: 6px;
            }
          }
        }
      }
    }
    // 运维成本同比环比
    .str2 {
      height: 42%;
    }
  }
}
</style>
